<template>
	<view class="content">
		<view class="size" @tap="accelerometer">accelerometer 设备加速传感器</view>
		<view class="size" @tap="watchAcceleration">watchAcceleration 监听设备加速度变化信息</view>
		<view class="size" @tap="clearWatch">clearWatch 关闭监听设备加速度信息</view>
		<view>
			说白是：检测手机运动状态,点击watchAcceleration，旋转手机看看效果，感觉累累就点击clearWatch关闭就好了
		</view>
		<view>xAxis-{{xAxis}}</view>
		<view>yAxis-{{yAxis}}</view>
		<view>yAxis-{{yAxis}}</view>
		<view>---- 应用到实践 ----</view>
		<button class="size" @tap="practice">摇一摇</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wid:null,
				xAxis:0,
				yAxis:0,
				zAxis:0
			}
		},
		methods: {
			accelerometer(){
				// 设备相对运动变化的运动传感器，主要包括个方向下:x,y,z
				plus.accelerometer.getCurrentAcceleration((e)=>{
					//加速度信息包括 xAxis , yAxis, zAxis 
					Object.keys(e).forEach(key=>{
						console.log(key,e[key])
						this[key] = e[key];
					})
				}, (err)=>{
					Object.keys(err).forEach(key=>[
						console.log(key,err[key])
					])
				})
			},
			watchAcceleration(){
				// 监听设备加速度变化信息,不执行关闭，将持续执行
				this.wid = plus.accelerometer.watchAcceleration( (e)=>{
					Object.keys(e).forEach(key=>{
						this[key] = e[key];
					})
					const conditon = Math.abs(this.xAxis) > 15 | Math.abs(this.yAxis) > 15 | Math.abs(this.zAxis) > 15;
					if(conditon){
						plus.nativeUI.alert("摇动了")
					}
				}, (error)=>{
					const { code, message} = error;
				} ,{frequency:2000})
			},
			clearWatch(){
				// 关闭监听设备加速度信息
				plus.accelerometer.clearWatch( this.wid );
				this.wid = null;
			},
			practice(){
				uni.navigateTo({
					url: '/pages/accelerometer/shake'
				});
			}
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.size{
		margin:30rpx 0;
	}
</style>
